<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-spin :spinning="spinning">
      <a-alert
        v-show="issuccess"
        message="添加成功"
        type="success"
        show-icon
        close-text="Close Now"
      />
      <a-alert
        v-show="iserror"
        type="error"
        message="Error text"
        banner
        close-text="Close Now"
      />

      <a-form-item label="数据库名称">
        <a-input
          v-decorator="[
            'Title',
            {
              rules: [
                { required: true, message: 'Please input your 数据库名称!' }
              ]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="数据库连接字符串"
        :has-feedback="ishasfeedback"
        :validate-status="ishasfeedbackstatus"
      >
        <a-input
          v-decorator="[
            'Connaction',
            {
              rules: [
                {
                  required: true,
                  message: 'Please input your 数据库连接字符串!'
                },
                { validator: checkPrice }
              ]
            }
          ]"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-spin>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      spinning: false,
      issuccess: false,
      iserror: false,

      ishasfeedback: false,
      ishasfeedbackstatus: "error",

      form: this.$form.createForm(this, { name: "coordinated" })
    };
  },
  methods: {
    checkPrice(rule, value, callback) {
      var that = this;

      that.$cloud
        .command("iTool Database IsOpen", {
          Connaction: value
        })
        .then(res => {
          that.ishasfeedback = true;
          if (res > 0) {
            that.ishasfeedbackstatus = "success";
            callback();
            return;
          } else {
            that.ishasfeedbackstatus = "error";
            callback("建立连接失败!");
          }
        })
        .catch(error => {
          console.error(error);
          that.ishasfeedback = false;
        });

      // if (value > 0) {
      //   callback();
      //   return;
      // }
    },

    handleSubmit(e) {
      e.preventDefault();
      var that = this;
      this.form.validateFields((err, values) => {
        console.log(err);

        if (!err) {
          console.log("Received values of form: ", values);
          that.spinning = true;
          that.$cloud
            .command("iTool Database Register", values)
            .then(res => {
              console.log(res);
              that.spinning = false;
              that.issuccess = true;
            })
            .catch(error => {
              console.log(error);
              that.spinning = false;
              that.iserror = true;
            });
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
.ant-alert {
  width: 50%;
  margin-bottom: 20px;
  margin-left: 20.83333333%;
}
</style>
